<template>
  <div class="CustomerOption">
    <!-- <div class="label">
      <LabelDropdown
        :label.sync="label"
        :customerId="customerId"
      ></LabelDropdown>
    </div> -->
    <div v-if="owner" class="text">归属：{{ owner }}</div>
    <div v-else></div>
    <div class="button">
      <DistributeButton
        :customerId="customerId"
        @updateLog="updateLog"
      ></DistributeButton>
      <Phone :data="detailData" :showBtn="true"></Phone>
      <el-dropdown
        v-functions="['customer_workorder_insert']"
        @command="handleWork"
        style="margin-left: 10px"
      >
        <el-button icon="el-icon-plus" size="mini">工单</el-button>
        <el-dropdown-menu slot="dropdown" class="bus-module">
          <template v-if="busCategory && busCategory.length">
            <el-dropdown-item
              :command="item.id"
              v-for="item in busCategory"
              :key="item.id"
              >{{ item.modelName }}</el-dropdown-item
            >
          </template>
          <template v-else>
            <el-dropdown-item command="none">暂无工单</el-dropdown-item>
          </template>
        </el-dropdown-menu>
      </el-dropdown>
      <Persion
        :showBtn="true"
        :customerId="customerId"
        @updatePerson="updatePerson"
      ></Persion>
      <Address
        :showBtn="true"
        :customerId="customerId"
        @updateAddr="updateAddr"
      ></Address>
      <TrackButton
        :showBtn="true"
        :customerId="customerId"
        @updateTrackList="updateTrackList"
      ></TrackButton>
    </div>
    <el-dialog
      v-if="workShow"
      :visible.sync="workShow"
      :modal="false"
      :show-close="false"
      class="work"
    >
      <EditBusiness
        ref="addOrEditBusinessRef"
        :title="title"
        :agentList="agentListArr"
        @cancelFun="back"
      />
    </el-dialog>
  </div>
</template>

<script lang="ts">
/**
 * 客户详情组件顶部操作栏
 */
import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import LabelDropdown from '../common/label/dropdown.vue'
import DistributeButton from './buttons/distribute.vue'
import TrackButton from './buttons/track.vue'
import Address from './buttons/address.vue'
import Persion from './buttons/person.vue'
import Phone from './buttons/phone.vue'
import { CommonModule } from '@/store/modules/common'
import EditBusiness from '@/afterSales/views/business/components/editBusiness.vue'
import { commonAction, deepClone } from '@/utils/common'
import commonDrawer from '@/components/globalTool/resizeDrawer/drawer.vue'
@Component({
  name: 'CustomerOption',
  components: {
    LabelDropdown,
    TrackButton,
    DistributeButton,
    Address,
    Persion,
    Phone,
    EditBusiness,
    commonDrawer
  }
})
export default class CustomerOption extends Vue {
  @Ref() private readonly addOrEditBusinessRef
  @Prop() private customerId
  @Prop() private detailData
  @Prop() private owner
  @Prop() private busCategory // 工单模型
  private label = {
    name: '设置标签',
    color: '',
    id: 'abc'
  }

  private workShow: boolean = false

  private title: any = ''

  private defaultContactor: any = ''

  private defaultAddr: any = ''

  get agentListArr () {
    const agents = deepClone(CommonModule.publicCache.userListObj)
    const agentsArr: any = []
    for (const i in agents) {
      agentsArr.push({ key: agents[i]._id, label: agents[i].name })
    }
    return agentsArr
  }

  private back () {
    this.workShow = false
  }

  private async getDefaultContactor () { // 获取默认联系人
    const params = {
      url: '/server-crm/action/contactor/listAll',
      method: 'POST',
      data: { customerId: this.customerId }
    }
    const res = await commonAction(params)
    if (res.success && res.data) {
      res.data.list.map(item => {
        if (item.isDefault) {
          this.defaultContactor = item._id
        }
      })
    }
  }

  private async getDefaultAddr () { // 获取默认联系地址
    const params = {
      url: '/server-crm/action/address/listAll',
      method: 'POST',
      data: { customerId: this.customerId }
    }
    const res = await commonAction(params)
    if (res.success && res.data) {
      res.data.list.map(item => {
        if (item.isDefault) {
          this.defaultAddr = item._id
        }
      })
    }
  }

  private async handleWork (id: any) {
    if (id === 'none') {
      return
    }
    this.defaultAddr = '' // 清空默认联系人
    this.defaultContactor = '' // 清空默认联系地址
    this.workShow = true
    let name = ''
    this.busCategory.forEach(item => {
      if (id === item.id) {
        name = item.modelName
      }
    })
    this.title = `创建的${name}`
    await this.getDefaultContactor()
    await this.getDefaultAddr()
    console.log(this.customerId + '客户id', this.defaultContactor + '默认联系人', this.defaultAddr + '默认联系地址', '工单对接参数-客户详情')
    this.$nextTick(() => {
      this.addOrEditBusinessRef.getBusinessDataById(
        {
          modelId: id,
          info: {
            associateUser: {
              customId: this.customerId,
              customContactId: this.defaultContactor,
              customAddressId: this.defaultAddr
            }
          }
        }
      )
    })
  }

  private updateTrackList () {
    this.$emit('updateTrackList')
  }

  private updatePerson () {
    this.$emit('updatePerson')
  }

  private updateAddr () {
    this.$emit('updateAddr')
  }

  private updateLog (owner?: any) {
    this.$emit('updateLog')
    if (owner) {
      this.$emit('updateOwner', owner)
    }
  }
}
</script>

<style lang="stylus" scoped>
.work
  >>> .el-dialog__header
    padding 0
    margin-bottom 0
  >>> .el-dialog__body
    padding 0
.CustomerOption
  display flex
  align-items center
  justify-content space-between
  .label
    margin-right 20px
  .text
    flex auto
  .button
    display flex
    //flex 0 0 520px
    justify-content space-between
</style>
